<template>
	<view>
	<view class="wrapper">
		<form>
			<view class="flex">
				<view class="flex-sub">
					<view aria-role="tab" class="cu-form-group margin-t">
						<view class="title">联系人</view>
					</view>
					<view class="margin-l"><input aria-role="textbox" class="input" type="text" placeholder="请输入联系人" v-model="addressData.name" /></view>
				</view>
				<text class="cuIcon iconfont icon-shuxian m-top"></text>
				<view class="flex-sub">
					<view aria-role="tab" class="cu-form-group margin-t">
						<view class="title">联系电话</view>
					</view>
					<view class="margin-l"><input aria-role="textbox" aria-label="请输入联系电话" class="input" type="text"  placeholder="请输入联系电话" v-model="addressData.phone" /></view>
				</view>
			</view>
			
			
			<view aria-role="tab" class="cu-form-group  margin-t">
				<text class="title">地址</text>
			</view>
			<view class="margin-l width-l">
				<input aria-role="combobox" placeholder="请选择城市" disabled="true" :value="addressData.addrArea" @click="lotusAddressData.visible = true" class="input">
					<lotus-address v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"></lotus-address>
				</input>
			</view>
			<view class="top-l">
				<text  aria-role="button" class="cuIcon iconfont icon-dizhi- text-blue" @click="isGetLocation"></text>
			</view>
			<view  aria-role="tab" class="cu-form-group  margin-t"> 
				<text class="title">详细地址</text>
			</view>
			<view class="margin-l">
				<input  aria-role="textbox" class="input" type="text" v-model="addressData.addr" placeholder="街道、楼号、门牌" placeholder-class="placeholder" />
			</view>
			<view class="cu-form-group margin-t default-row">
				<text aria-role="tab" class="tit">设为默认</text>
				<switch  aria-role="switch" :checked="addressData.deftIs" color="#fa436a" @change="switchChange" />
			</view>
		</form>
		<view class="padding flex flex-direction">
			<button aria-role="button" class="cu-btn bg-blue margin-tb-sm lg" @click="confirm">提交</button>
		</view>
	</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import lotusAddress from "@/components/lotusaddress/lotusAddress.vue"
	export default {
		data() {
			return {
				addressData: {
					uid: '',
					name: '',
					phone: '',
					addr:'',
					addrArea: '',
					state: '1',
					deftIs: 0
				},
				lotusAddressData:{
					visible:false,
					provinceName:'',
					cityName:'',
					townName:'',
				},
			}
		},
		onLoad(option){
			if(option.type==='edit'){
				this.addressData = JSON.parse(option.data)
			}
		},
		computed: {
			...mapState(['users'])
		},
		methods: {
			switchChange(e){
				this.addressData.deftIs = e.detail.value?1:0
			},
			choseValue(res){
            //res数据源包括已选省市区与省市区code
				this.lotusAddressData.visible = false;//visible为显示与关闭组件标识true显示false隐藏
				if(res.isChose){
					this.lotusAddressData.provinceName = res.provice;//省
					this.lotusAddressData.cityName = res.city;//市
					this.lotusAddressData.townName = res.town;//区
					
					//赋值到addressData
					this.addressData.addrArea = res.provice + '' + res.city + '' + res.town

				}
			},
			
			//提交
			confirm(){
				const that = this
				let data = this.addressData;
				if(!data.name){
					this.$utils.msg('请填写收货人姓名');
					return;
				}
				if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.phone)){
					this.$utils.msg('请输入正确的手机号码');
					return
				}
				if (!data.addrArea) {
					this.$utils.msg('请选择地区');
					return
				}
				if (!data.addr) {
					this.$utils.msg('请填写详细地址')
					return
				}
				data.uid = this.users.uid;
				uni.showLoading({title:"保存中"});
				this.$request.postJson('/view/uacid/addr-save', this.addressData).then(res => {
					that.$utils.msg('已保存');
					uni.hideLoading();
					that.$utils.prePage().refreshList(data);
					uni.navigateBack()
				})
			},
			getAuthorizeInfo(a="scope.userLocation"){  //1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
				let _this = this;
				uni.authorize({
					scope: a,
					success(res){ //1.1 允许授权
						_this.getLocationInfo();
					},
					fail() {    //1.2 拒绝授权
						_this.$utils.msg('你拒绝授权，无法获得周边信息');
					}
				})
			},
			getLocationInfo(){  //2. 获取地理位置
				var _this=this;
				uni.getLocation({
					type: 'wgs84',
					success (res) {
						uni.chooseLocation({
							latitude:res.latitude,
							longitude:res.longitude,
							success (res) {
								_this.addressData.addrArea = res.address
								_this.addressData.addr = res.name
							},
							fail(error) {
								
							}
								
						})
						
					}
				});
			},
			isGetLocation(a="scope.userLocation"){ // 3. 检查当前是否已经授权访问scope属性
				let _this = this;
				uni.getSetting({
					success(res) {					
						if (!res.authSetting[a]) {  //3.1 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
							_this.getAuthorizeInfo()
						}else{
							_this.getLocationInfo()
						}
					}
				})
			}
			
		},
		components:{
			"lotus-address":lotusAddress
		},
	}
</script>

<style lang="scss">
	page{
		background: #fff;
		padding-top: 16upx;
	}
	.margin-t {
		margin-top: 20upx;
	}
	.margin-l {
		margin-left: 26upx;
	}
	.width-l {
		width: 610upx;
	}
	.top-l {
		float: right;
		margin-top: -48upx;
		margin-right: 38upx;
	}
	.m-top {
		margin-top: 87upx;
		margin-right: 30upx
	}
	.cu-form-group {
		border-top: 0.5px solid #eee;
	}

	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30upx;
		height: 110upx;
		background: #fff;
		
		.tit{
			flex-shrink: 0;
			width: 120upx;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.input{
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.icon-shouhuodizhi{
			font-size: 36upx;
			color: $font-color-light;
		}
	}
	.default-row{
		margin-top: 16upx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16upx) scale(.9);
		}
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>